<template>
    <div>
        
        <Table border stripe :columns="header" :data="data_list" size="small" ref="table" class="table" @on-row-click="rowClick"></Table>
            
        <Modal v-model="modal_edit_status" title="编辑短信费用" @on-ok="option_edit_save" @on-cancel="modal_cancel">
            <Form :model="temp_edit_data" :label-width="80">
                <Form-item label="每条短信内容的最大字数">
                    <Input v-model="temp_edit_data.wordCount" placeholder="请输入"></Input>
                </Form-item>
             
                <Form-item label="每条短信的费用(元)：">
                    <Input v-model="temp_edit_data.unitPrice" placeholder="请输入"></Input>
                </Form-item>
    
                <Form-item label="创建日期：">
                    <Date-picker type="date" placeholder="选择日期" v-model="temp_edit_data.createTime"></Date-picker>
                </Form-item>
                    
            </Form>
        </Modal>
        
    
    </div>
</template>
<script>
export default {
    data() {
        return {

            //初始化url
            init_url: '/mes/core/price',      
            //修改一行url
            edit_url: '/mes/core/price',


            //表格标题
            header: [
                {
                    type: 'index',
                    width: 60,
                    align: 'center'
                },
                {
                    "title": "每条短信内容的最大字数",
                    "key": "wordCount",
                    "width": 300,
                    "sortable": true,
                },
                {
                    "title": "每条短信的费用(元)",
                    "key": "unitPrice",
                    "width": 300,
                    "sortable": true,
                },
              
                {
                    "title": "创建时间",
                    "key": "createTime",
                    "width": 150,
                    "sortable": true
                },
               
                {
                    "title": '操作',
                    "min-width": 100,
                    "align": 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.edit_show(params)
                                    }
                                }
                            }, '编辑')
                        ]);
                    }
                }


            ],
            //表格数据源
            data_list: [],
           
            //编辑modal对话框显示状态
            modal_edit_status: false,
          
            //编辑一行的临时数据
            temp_edit_data: {
                id: '',
                wordCount: '',
                unitPrice: '',
                createTime: '',
            },          
            //编辑一行的数据索引
            temp_edit_index: '',
        }
    },
    methods: {
      
        //modal对话框取消事件
        modal_cancel() {
            this.$Message.info('操作已经取消');
        },
        //编辑按钮触发事件
        edit_show(params) {
            this.temp_edit_data = params.row;
            this.modal_edit_status = true;
            this.temp_edit_index = params.index;

        },
             
        //修改一行操作
        option_edit_save() {
            var _self = this;
            this.$ajax.post(_self.edit_url, this.temp_edit_data)
                .then(function (response) {
                   
                    _self.$Message.info('修改成功');
                })
                .catch(function (error) {
                    console.log(error);
                    _self.$Message.info('修改失败');
                });
        },
        
        //表格行点击事件
        rowClick(row) {
            //this.$emit('getAppId', row.id);
        },
        
    },
    mounted() {

        var _self = this;

        //初始化表单数据
        this.$ajax.get(_self.init_url)
            .then(function (response) {
                
                _self.data_list = response.data;        
            })
            .catch(function (error) {
                console.log(error);
            });
    }
}
</script>

<style>
.btn-group {
    margin-bottom: 5px;
}
</style>
